<template>
  <div class="personalWrapper">
    <div class="personalTop">
      <scroller lock-x use-pulldown height="100%" @pulldown:loading="loadInPersonal" :pulldown-config="config"  pullup-status="disabled">
        <div>
          <personal-top :invite-count="inviteCount" :money="money" :username="username" :user-img="userImg" :coupon-len="couponLen" :user-info="userInfo"></personal-top>
          <middle-menu></middle-menu>
          <div class="divider"></div>
          <box class="bottom-wrapper">
            <x-button type="default" v-show="loginStatus" @click="loginout">退出登录</x-button>
            <x-button type="warn" v-show="!loginStatus" v-link="{path: '/login'}">登录</x-button>
          </box>
        </div>
      </scroller>
    </div>
    <div class="personalBottom"></div>


    <confirm-loginout  v-on:message="receiverLoginoutMsg" :show="show" :status="loginStatus"></confirm-loginout>
  </div>
</template>
<script>
  import bigGift from './../components/bigGift/bigGift.vue'
  import personalTop from './../components/personal/personalTop.vue'
  import middleMenu from './../components/personal/middleMenu.vue'
  import confirmLoginout from './../components/personal/confirmLoginout.vue'
  import { XButton, Box, Scroller } from './../../components'
  var LocalStorageUtil = require('./../../commons/js/LocalStorageUtil.js')
  var MyRequest = require('./../../commons/js/MyRequest.js')
  var Global = require("./../../commons/js/Global.js")
  export default {
    data() {
      return {
        loginStatus: false,
        userInfo: LocalStorageUtil.getItem("User"),
        show: false,
        couponList: new Array(),
        couponLen: 0,
        money: '',
        inviteCount: '',
        userImg: '',
        username: '',
        config: {content:'下拉刷新', height: 30, downContent:'下拉刷新',upContent: '释放刷新',loadingContent:'加载中', clsPrefix: 'xs-plugin-pullup-'}
      }
    },
    components: {
      personalTop,
      middleMenu,
      XButton,
      Box,
      confirmLoginout,
      Scroller,
      bigGift,
      Scroller
    },
    created: function() {

      if(this.userInfo != null && this.userInfo.id) {
        this.money = this.userInfo.money
        this.inviteCount = this.userInfo.inviteCount
        this.username = this.userInfo.nickname
        if(this.userInfo.photo == '' || this.userInfo.photo == "http://m.52letsgo.cn") {
          this.userImg = 'http://static.52letsgo.cn/zz/wechatimg/ic_user_head.png'
        } else {
          this.userImg = this.userInfo.photo
        }

        this.loginStatus = true
        Global.closeLoading()
        var data = {userId: this.userInfo.id }
        MyRequest.MyGet("CouponCount", this, function(result, that) {
          that.couponLen = result.data;
        }, data)
        var data2 = {
          action: "info",
          id: this.userInfo.id
        }
        MyRequest.MyGet("UserInfo", this, function (result, that) {
          LocalStorageUtil.setItem("User", result.data)
          that.userInfo = result.data;
          that.money = that.userInfo.money
          that.inviteCount = that.userInfo.inviteCount
          that.username = that.userInfo.nickname
          if(that.userInfo.photo == '' || that.userInfo.photo == "http://m.52letsgo.cn") {
            that.userImg = 'http://static.52letsgo.cn/zz/wechatimg/ic_user_head.png'
          } else {
            that.userImg = that.userInfo.photo
          }
        }, data2)
      } else {
        this.loginStatus = false
        this.userInfo = {}
        this.money = 0
        this.inviteCount = 0
        this.userImg = 'http://static.52letsgo.cn/zz/wechatimg/ic_user_head.png'
        this.username = '登录/注册'
        this.couponLen = 0
        LocalStorageUtil.setItem("User", {})
        Global.closeLoading()
      }
    },
    methods: {
      loginout () {
        this.show = true
      },
      receiverLoginoutMsg (msg) {
        this.show = msg.show
        this.loginStatus = msg.loginStatus
        if(!msg.loginStatus) {
          this.userInfo = {}
          this.money = 0
          this.inviteCount = 0
          this.userImg = 'http://static.52letsgo.cn/zz/wechatimg/ic_user_head.png'
          this.username = '登录/注册'
          this.couponLen = 0
        }
      },
      loadInPersonal (uuid) {
        if (!this.userInfo || !LocalStorageUtil.getItem("User").id){
          this.$nextTick(() => {
            this.$broadcast('pulldown:reset', uuid)
          })
          return;
        }
        var data = {
          action: "info",
          id: this.userInfo.id
        }
        this.uuid = uuid
        MyRequest.MyGetWithToast("UserInfo", this, function (result, that) {
          
          LocalStorageUtil.setItem("User", result.data)
          that.userInfo = result.data
          that.money = that.userInfo.money
          that.inviteCount = that.userInfo.inviteCount
          that.username = that.userInfo.nickname
          if(that.userInfo.photo == '' || that.userInfo.photo == "http://m.52letsgo.cn") {
            that.userImg = 'http://static.52letsgo.cn/zz/wechatimg/ic_user_head.png'
          } else {
            that.userImg = that.userInfo.photo
          }
          var data2 = {userId: that.userInfo.id }
            MyRequest.MyGet("CouponCount", that, function(result, self) {
              self.couponLen = result.data;
              Global.closeLoading()
               self.$nextTick(() => {
                self.$broadcast('pulldown:reset', self.uuid)
              })
            }, data2)
         
        }, data)
      }
    }
  }
</script>
<style>
  .divider {
    width: 100%;
    background: #f2f2f2;
    height: 1rem;
  }
  .personalWrapper .bottom-wrapper {
    padding: 2rem 2rem 3rem 2rem;
  }
  .xs-plugin-pullup-container {
    font-size: 1.3rem;
    font-family: "Microsoft Yahei";
  }
  .personalWrapper .weui_btn + .weui_btn {
    margin-top: 0;
  }
  .personalWrapper .personalTop {
    width: 100%;
    position: absolute;
    bottom: 4.6rem;
    top: 0;
    left: 0;
  }
  .personalWrapper .personalBottom {
    width: 100%;
    height: 4.6rem;
    line-height: 4.6rem;
    position: absolute;
    bottom: 0;
    left: 0;
  }
</style>
